import ReactDOM from 'react-dom';
/**
 *  学习目标：Todos 案例
 */
import React from 'react';
import { useEffect, useState } from 'react/cjs/react.development';
import './styles/base.css';
import './styles/index.css';

function App() {
  const [list, setList] = useState(
    JSON.parse(localStorage.getItem('todo-70')) || [
      {
        id: 1,
        task: '小明',
        isDone: true,
      },
      {
        id: 2,
        task: '小红',
        isDone: false,
      },
      {
        id: 3,
        task: '小蓝',
        isDone: true,
      },
    ]
  );
  function hangleClick(id) {
    const newList = list.map((item) => {
      return {
        ...item,
        isDone: item.id === id ? !item.isDone : item.isDone,
      };
    });
    setList(newList);
  }
  const handledel = (id) => {
    console.log(id);
    const newList = list.filter((item) => {
      if (item.id !== id) return item;
    });
    setList(newList);
  };
  const handleAdd = (value) => {
    console.log(value);
    const newList = { task: value, id: Date.now(), isDone: false };
    setList([...list, newList]);
  };

  const [type, setType] = useState(
    localStorage.getItem('todotype-70') || 'all'
  );
  const showNew = list.filter((item) => {
    if (type === 'active') return !item.isDone;
    if (type === 'completed') return item.isDone;
    return item;
  });
  useEffect(() => {
    localStorage.setItem('todo-70', JSON.stringify(list));
    localStorage.setItem('todotype-70', type);
  }, [list, type]);
  return (
    <section className="todoapp">
      {/* 头部 */}
      <Header handleAdd={handleAdd} />
      {/* 主体 */}
      <Main list={showNew} hangleClick={hangleClick} handledel={handledel} />
      {/* 底部 */}
      <Footer type={type} setType={setType} />
    </section>
  );
}

function Footer({ type, setType }) {
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => setType('all')}
            className={type === 'all' ? 'selected' : ''}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => setType('active')}
            className={type === 'active' ? 'selected' : ''}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => setType('completed')}
            className={type === 'completed' ? 'selected' : ''}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}

function Main({ list, hangleClick, handledel }) {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => (
          <li className={item.isDone ? 'completed' : ''} key={item.id}>
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                checked={item.isDone}
                onChange={() => hangleClick(item.id)}
              />
              <label>{item.task}</label>
              <button
                className="destroy"
                onClick={() => handledel(item.id)}
              ></button>
            </div>
          </li>
        ))}

        {/* <li className="">
           <div className="view">
             <input className="toggle" type="checkbox" />
             <label>睡觉</label>
             <button className="destroy"></button>
           </div>
         </li> */}
      </ul>
    </section>
  );
}

function Header({ handleAdd }) {
  const [task, setTask] = useState('');
  function enterDown(e) {
    if (e.code === 'Enter') {
      console.log(e);
      handleAdd(e.target.value);
    }
  }
  return (
    <header className="header">
      <h1>Tod's</h1>
      <input
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
        value={task}
        onKeyDown={enterDown}
        onChange={(e) => setTask(e.target.value)}
      />
    </header>
  );
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'));
